<template>
  <div class="login">
    <div class="login-box">
      <div class="form-box">
        <div class="title">登入<br />您的账号</div>

        <div class="input-box">
          <div class="input-line">
            <input
              type="text"
              placeholder="Your Account"
              v-model="account"
              maxlength="11"
              clearable
              style="letter-spacing: 1px"
            />
            <div class="input-line-solid"></div>
          </div>

          <div class="input-line">
            <input
              type="password"
              placeholder="Password"
              v-model="password"
              maxlength="20"
              clearable
              style="letter-spacing: 1px"
            />
            <div class="input-line-solid"></div>
          </div>
        </div>

        <div class="radio-box" @click="remember_pwd = !remember_pwd">
          <div :class="remember_pwd ? 'radio active' : 'radio'">
            <div class="radio-circle" v-if="remember_pwd"></div>
          </div>
          记住密码
        </div>

        <el-button
          style="
            width: 100%;
            margin-top: 100px;
            font-size: 17px;
            letter-spacing: 2px;
            max-width: 300px;
          "
          size="large"
          type="primary"
          :loading="login_loading"
          @click="login"
          >登入</el-button
        >
        <div class="btn-box">
          <el-button
            style="width: 50%"
            :loading="visitor_login_loading"
            @click="visitor_login"
            >访客登入</el-button
          >
          <el-button style="width: 50%" @click="reset">重置</el-button>
        </div>
      </div>
      <div class="blackboard">
        <div class="quotes">
          <h1 style="font-size: 35px; line-height: 1.5; letter-spacing: 2px">
            {{ slogan_list[new Date().getDay() - 1]?.title }}
          </h1>
          <h5 style="width: 100%; opacity: 0.8; letter-spacing: 1px">
            {{ slogan_list[new Date().getDay() - 1]?.sub_title }}
          </h5>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { login as check_login } from "../../ajaxServices/user";

// 标语
const slogan_list = [
  {
    title: "生命是人生的船，理想是生命的帆，勤劳勇敢就能达到美好的彼岸。",
    sub_title:
      "Life is the boat of life, ideal is the sail of life, hard work and courage can reach the other side of the beautiful.",
  },
  {
    title: "纵有疾风起，人生不言弃。",
    sub_title: "Even if the wind rises, life does not give up.",
  },
  {
    title: "人只有献身于社会，才能找出那短暂而有风险的生命的意义。",
    sub_title:
      "Only by devoting oneself to society can one find out the meaning of the short and risky life.",
  },
  {
    title: "人生就像一盒巧克力，你永远不知道下一颗是什么味道。",
    sub_title:
      "Life was like a box of chocolates, you never know what you're going to get.",
  },
  {
    title:
      "我们从光的地方，一下子进到暗的地方。眼睛就会发昏，灰尘精灵就会跑出来。",
    sub_title:
      "We went from the light to the dark. Your eyes will faint, and the dust elves will come out.",
  },
  {
    title:
      "遇见的都是天意，拥有的都是幸运，不完美又何妨，万物皆有裂痕，那是光照进来的地方。",
    sub_title:
      "What you meet is providence, what you have is luck, what is not perfect, everything has cracks, that is where the light comes in.",
  },
  {
    title: "规矩就是规矩，不工作会被变成动物。",
    sub_title: "Rules are rules. Don't work and be turned into animals.",
  }
];

const router = useRouter();
const store = useStore();

// 账号密码
const account = ref(
  (store.state.user_info && store.state.user_info.account) || ""
);
const password = ref(
  (store.state.user_info && store.state.user_info.password) || ""
);

// 记住密码
const remember_pwd = ref(store.state.user_info && store.state.user_info.password != "" ? true : false);

const login_loading = ref(false);
const visitor_login_loading = ref(false);

// 登入
const login = () => {
  if (!account.value || account.value == "") {
    ElMessage({
      message: "账号不能为空",
      type: "warning",
    });
    return;
  }
  if (!password.value || password.value == "") {
    ElMessage({
      message: "密码不能为空",
      type: "warning",
    });
    return;
  }

  login_loading.value = true;
  login_service();
};

// 访客登入
const visitor_login = () => {
  visitor_login_loading.value = true;
  let timer = setTimeout(() => {
    clearTimeout(timer);
    visitor_login_loading.value = false;

    store.dispatch("save_user_info", {
      id: "",
      account: "",
      password: "",
      date: "",
      permit_super: 0,
      phone: "",
      user_name: "匿名用户",
      address: "",
    });
    store.dispatch("handlerTabsActiveName", "/index");
  }, 1000);
};

// 重置
const reset = () => {
  account.value = "";
  password.value = "";
};

// 登录 post
const login_service = () => {
  let reqData = {
    account: account.value.trim() || "",
    password: password.value.trim() || "",
  };
  check_login(reqData)
    .then((res) => {
      const {
        id,
        account,
        address,
        date,
        password,
        permit_super,
        phone,
        user_name,
      } = res.data[0];
      login_loading.value = false;
      store.dispatch("save_user_info", {
        id: id,
        account: account,
        password: remember_pwd.value ? password : "",
        date: date,
        permit_super: permit_super,
        phone: phone,
        user_name: user_name,
        address: address,
      });
      store.dispatch("handlerTabsActiveName", "/index");
    })
    .catch(() => {
      login_loading.value = false;
    });
}
</script>


<style scoped lang="scss">
.login {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // background: #7adae8;
  background: #f8e3c5;
  user-select: none;

  .login-box {
    width: 70%;
    height: 80%;
    min-width: 1024px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 0px 6px 0px #73767a;

    .form-box {
      flex: 0.3;
      padding: 0 60px;

      .title {
        width: 100%;
        height: auto;
        font-size: 30px;
        font-weight: bold;
        text-align: left;
        margin-top: 90px;
      }

      .input-box {
        width: 100%;
        height: auto;
        min-height: 50px;
        display: flex;
        flex-direction: column;
        margin-top: 50px;

        .input-line {
          width: 100%;
          height: 50px;
          margin-top: 10px;

          input {
            appearance: none;
            border: none;
            outline: none;
            width: 100%;
            height: 100%;
            font-size: 15px;
          }

          .input-line-solid {
            width: 100%;
            height: 1px;
            background: #a8abb2;
            border-radius: 100%;
          }
        }
      }

      .radio-box {
        width: 100px;
        height: 25px;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #73767a;
        margin-top: 20px;
        cursor: pointer;

        .radio {
          width: 12px;
          height: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 100%;
          border: 1px solid #73767a;
          margin-right: 5px;

          .radio-circle {
            width: 8px;
            height: 8px;
            background: #409eff;
            border-radius: 100%;
          }
        }

        .radio.active {
          border: 1px solid #409eff;
        }
      }

      .btn-box {
        width: 100%;
        max-width: 300px;
        height: auto;
        display: flex;
        justify-content: space-between;
        margin: 20px auto 0;
      }
    }

    .blackboard {
      flex: 0.8;
      // background: #409EFF;
      position: relative;
      color: #fff;
      background: url("../../assets/login_board1.png") no-repeat;
      background-size: cover;

      .quotes {
        position: absolute;
        width: 85%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -10%);
        text-align: left;
      }
    }
  }
}
</style>